<template>
  <div>
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>学员卡名称</p>
          <el-input v-model="logTypeValue" size="mini" clearable />
        </el-col>
        <el-col :md="6" :lg="4">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="query()">{{ $t('button.query') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20" class="gl_my_15">
      <!-- 添加客户按钮 -->
      <el-col :md="6" :lg="4">
        <el-button type="primary" size="mini" @click="editOfAdd('add')">添加学员卡</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="showTableData"
      style="width: 100%"
      stripe
      size="mini"
    >
      <el-table-column
        prop="cardName"
        label="学院卡名称"
      />
      <el-table-column
        prop="clubName"
        label="分馆名称"
      />
      <el-table-column
        prop="time"
        label="有效时长"
      />
      <el-table-column
        prop="times"
        label="有效次数"
      />
      <el-table-column
        prop="price"
        label="价格"
      />
      <el-table-column
        prop="operating"
        label="操作"
      >
        <template slot-scope="{row,$index}">
          <el-button type="text" size="mini" @click="editOfAdd(row,$index)">编辑</el-button>
          <el-button type="text" size="mini" @click="delect($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <StudentCardForm ref="studentCardForm" @pushTabelData="getTabelDate" />
  </div>
</template>

<script>
import StudentCardForm from './studentCardForm';
export default {
  name: 'StudentCard',
  components: {
    StudentCardForm
  },
  data() {
    return {
      students: {
        name: ''
      },
      logTypeValue: '',
      tableData: [{
        cardName: '季卡',
        clubName: '元动未来俱乐部',
        time: '90',
        times: '90',
        price: '1800'
      }, {
        cardName: '月卡',
        clubName: '胡若欣',
        time: '50',
        times: '50',
        price: '1000'
      }],
      showTableData: [],
      logType: [ // 日志类型
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'loginLog',
          label: '登录日志'
        },
        {
          value: 'handleLog',
          label: '操作日志'
        }
      ]
    };
  },
  created () {
    // 获取数据
    // this.tableData = 你获取的数据
    // this.showTableData = JSON.parse(JSON.stringify(你获取的数据))
    this.showTableData = JSON.parse(JSON.stringify(this.tableData));
  },
  methods: {
    editOfAdd(row, index) {
      this.$refs.studentCardForm.open(row);
    },
    query() {
      let logTypeValue = this.logTypeValue;
      if (logTypeValue === '全部') {
        logTypeValue = '';
      }
      console.log(logTypeValue);
      this.showTableData = this.tableData.filter(item => item.cardName.includes(logTypeValue));
    },
    // 添加新信息
    getTabelDate(data) {
      this.showTableData.push(data);
      this.$refs.studentCardForm.close();
    },
    // 删除
    delect(index) {
      console.log(index);
      this.$confirm('你确定要删除这条信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO
        this.showTableData.splice(index, 1);
      });
    }
  }
};
</script>

